<template>
  <el-row :gutter="20">
    <el-col :span="3">
      <el-menu
        default-active="4"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#FFFFFF"
        text-color="#000000"
        active-text-color="#FF0000"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Vip'}" >会员中心</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Cookbook'}" >菜谱</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Topics'}" >话题</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-menu"></i>
          <span slot="title">
              <router-link :to="{name: 'Log'}" >日志</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Menu'}" >菜单</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Collect'}" >收藏</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">
              <router-link :to="{name: 'Setting'}" >账户设置</router-link>
          </span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="14">
      <div>
        <font size="4">
          <i class="el-icon-back"></i>
        </font>
        <span style="margin-left:10px">
          <font size="4">发布新话题</font>
        </span>
      </div>

      <hr />
    </el-col>
  </el-row>
</template>

<script>
import FoodApi from "@/networks/api";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        password: ""
      },
      radio3: "3",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goBack() {
      console.log("go back");
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
};
</script>